<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="客户名称">
                                <el-input v-model="search.user" placeholder="请输入客户名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预约类型">
                                <el-select v-model="search.type" clearable placeholder="请选择预约类型">
                                    <el-option label="来访" :value="0" />
                                    <el-option label="拜访" :value="1" />
                                    <el-option label="到会" :value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6">
                            <el-form-item label="预约时间">
                                <el-date-picker
                                    v-model="search.date1"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6">
                            <el-form-item label="上门状态">
                                <el-select v-model="search.status" clearable placeholder="请选择上门状态">
                                    <el-option label="待上门" :value="0" />
                                    <el-option label="已上门" :value="1" />
                                    <el-option label="未上门" :value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6">
                            <el-form-item label="创建人">
                                <el-select v-model="search.member_id" clearable placeholder="请选择创建人">
                                    <el-option v-for="(item, index) in memberList" :key="index" :label="item.realname" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="创建时间">
                                <el-date-picker
                                    v-model="search.date2"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- <div class="number-card">
                <div class="item">
                    <div class="title">今日待上门</div>
                    <div class="number">{{ count }}</div>
                </div>
                <div class="item">
                    <div class="title">今日已上门/个</div>
                    <div class="number">{{ count }}</div>
                </div>
                <div class="item">
                    <div class="title">明日待上门/个</div>
                    <div class="number">{{ count }}</div>
                </div>
            </div> -->
            <!-- 批量操作 -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" size="small" @click="add(null)">新建</el-button>
            </div>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row>
                <el-table-column prop="times" label="预约时间" width="140" />
                <el-table-column prop="type" label="预约类型">
                    <template #default="scope">
                        <span>{{ scope.row.type | typeFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user_name" label="客户名称">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row)">{{ scope.row.user_name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="user_phone" label="电话号码" />
                <el-table-column prop="status" label="上门状态">
                    <template #default="scope">
                        <span>{{ scope.row.status | statusFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remind_time" label="提醒时间" width="140">
                    <template #default="scope">
                        <span>{{ scope.row.remind_time | remindFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="member" label="创建人" />
                <el-table-column prop="created" label="创建时间" />
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="statusChange(scope.row.id)">上门状态</el-button>
                        <el-button type="text" size="small" @click="add(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
        <!-- 新增 -->
        <add-dialog ref="reservationAdd" @success="getList" />
        <!-- 修改状态 -->
        <status-dialog ref="reservationStatus" @success="getList" />
        <!-- 详情 -->
        <detail-drawer ref="detailDrawer" @success="getList" />
    </div>
</template>

<script>
import { reservationList, reservationDel } from '@/api/reservation'
import { memberList } from '@/api/system'
import AddDialog from './components/AddDialog'
import StatusDialog from './components/StatusDialog'
import DetailDrawer from '../custom/components/DetailDrawer'
export default {
    name: 'ClueMine',
    components: {
        AddDialog,
        StatusDialog,
        DetailDrawer
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '来访',
                2: '拜会',
                3: '到会'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                0: '删除',
                1: '待上门',
                2: '已上门',
                3: '改约',
                4: '爽约',
                5: '业务取消',
                6: '其他'
            }
            return map[val]
        },
        remindFilter(val) {
            const map = {
                1: '不提醒',
                2: '到时提醒',
                3: '提前5分钟',
                4: '提前15分钟',
                5: '提前30分钟',
                6: '提前1小时',
                7: '提前2小时',
                8: '提前1天'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                user: '', 
                type: '', 
                status: '',
                pages: 1,
                limit: 10,
                total: 0
            },
            memberList: [],
            dataList: [],
            count: 0
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        detail(row) {
            this.$refs.detailDrawer.showDialog({id: row.user_id}, {}); 
        },
        // 新建
        add(item) {
            this.$refs.reservationAdd.showDialog(item);
        },
        // 修改状态
        statusChange(id) {
            this.$refs.reservationStatus.showDialog(id);
        },
        // 删除
        del(id) {
            this.$alert('确定将选中预约删除？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        reservationDel({ id }).then(res => {
                            if (res.status) {
                                this.getList();
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.sex = '';
            this.search.keys = '';
            this.search.member_id = '';
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            reservationList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                    this.search.total = Number(res.data.count);
                    this.count = res.data.count;
                }
                this.loading = false;
            })
        },
        // 获取 options
        getOptions() {
            memberList().then(res => {
                this.memberList = res.data.list || []
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.tag-box {
    width: 100%;
    display: flex;
    overflow: hidden;
}
.el-tag {
    margin: 2px;
}
.number-card {
    display: flex;
    .item {
        min-width: 300px;
        padding: 10px 20px;
        border: 1px solid #eee;
        margin: 0 40px 20px 0;
        .title {
            font-size: 14px;
        }
        .number {
            font-size: 30px;
            margin-top: 5px;
        }
    }
}
</style>
